<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIPine</title>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.3/dist/alpine.js" defer></script>
</head>
<body>
    <div id="app" x-data="todos()">
        <form @submit.prevent="addNewTask()">
            <input type="text" x-model="task" />
            <button type="submit">Add new task</button>
        </form>
        <ul>
            <template x-for="todo in todos" :key="todo.id">
                <li :class="{ 'is-complete': todo.isComplete === true }">
                    <span x-text="todo.task"></span>
                    <input type="checkbox" x-model="todo.isComplete" />
                    <button @click="removeTask(todo.id)">Delete</button>
                </li>
            </template>
        </ul>
    </div>
    <script >
function todos() {
    return {
        //data
        increment: 3,
        task: '',
        todos: [
            {
                id: 1,
                task: 'Open VS code',
                isComplete: true
            },
            {
                id: 2,
                task: 'Write a todo app in alpinejs',
                isComplete: false
            }
        ],
        addNewTask() {
            //Return if empty
            if (this.task.trim() === '') return;
            //Add new todo and clear task
            this.todos.push({
                id: this.increment++,
                task: this.task,
                isComplete: false
            });
            this.task = '';
        },
        removeTask(todoToRemove) {
            this.todos = this.todos.filter(todo => todo.id != todoToRemove);
        }
    /**/
    }
}
    </script>
</body>
</html>